<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css">
		.item,.carousel-caption{
			width: 100%;
			height: 300px;
		}
		.carousel-caption{
			left: 0;
			top: 0;
			padding: 0;
		}
	</style>
</head>
<body>
 
<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<!--<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>  --> 
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner" style="width: 1000px;">
		<div class="item active" style="">
			<div class="carousel-caption">
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
			</div>
			
		
		</div>
		<div class="item " style="">
			<div class="carousel-caption">
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
			</div>
			
		</div>
		<div class="item" style="">
			<div class="carousel-caption">
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
				<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
			</div>
			
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="carousel-control" href="#myCarousel"  style="left: -94px;" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
	    <span class="sr-only">Previous</span>
	</a>
	<a class=" carousel-control" href="#myCarousel" style="left: 850px;" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	</a>
 
</div> 
 
<script type="text/javascript">
	
	$(document).ready(function(){
    $('#myCarousel').carousel()
   })
</script>
</body>
</html>